<template>
  <div id='tmpl'>
    <!--1.0新闻详情结构-->
    <div class="title">
      <h4 v-text="info.title"></h4>
      <p>{{info.add_time |datefmt('YYYY-MM-DD')}} {{info.click}}次浏览
      </p>
      <p class="line"></p>
    </div>
    <div id="content" v-html="info.content"></div>
  
    <!--缩略图-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li v-for="(item, index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
        </li>
      </ul>
    </div>
    <!--评论组件-->
    <div id="comment">
      <comment :id="id"></comment>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js'
// 导入品论组件
import comment from '../subcom/comment.vue';
export default {
  components: {
    comment
  },
  data() {
    return {
      id: 0,
      info: {},
      list: []
    };
  },
  created() {
    //1.0获取路由参数付给id
    this.id = this.$route.params.id;
    // 2.0 请求图片的详情数据
    this.getinfo()
    // 3.0 请求缩略图数据
    this.getimgs();
  },
  methods: {
    getinfo() {
      const url = common.apidomain + '/api/getnew/' + this.id;
      this.$http.get(url).then(function (response) {
        if (response.body.status != 0) {
          Toast(response.body.message);
          return;
        }
        this.info = response.body.message[0];
      })
    },
    getimgs() {
      var url = common.apidomain + '/api/getthumimages/' + this.id;
      this.$http.get(url).then(function (response) {
        var body = response.body;
        if (body.status != 0) {
          Toast(body.message);
          return;
        }
        // 将正常的逻辑数据赋值给this.list数组
        // 由于vue-preview组件要求的数据是 {src:,w:,h:}但是服务器响应回来的数据中是没有 w ,h 的，所以只能自己添加了
        body.message.forEach(function (item) {
          // 当前所有图片不管有多大都设置为宽高为400，就会导致图片失真了，所以应该按照图片的实际尺寸来设置
          var img = document.createElement('img');
          img.src = item.src;
          item.h = img.height;
          item.w = img.width;
        });
        this.list = body.message;
      });
    }
  }
}
</script>
<style lang="css" scoped>
.title h4 {
  color: #0094ff;
}

.title p {
  color: rgba(0, 0, 0, 0.5);
}

.title,
#content {
  padding: 5px;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.mui-content,
.mui-content ul {
  background-color: #fff;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border-right: 0px;
  border-bottom: 0px;
}

.mui-grid-view.mui-grid-9 {
  border-top: 0px;
  border-left: 0px;
}








/* 9宫格缩略图的样式*/

.mui-content img {
  width: 100px;
  height: 100px;
}
</style>